<template>
	<zui-box>

		<!-- 头部导航 -->
		<zui-navbar title='金豆订单'></zui-navbar>

		<view class="tabs_box">
			<u-tabs lineColor="#AA334F" :scrollable='false' :activeStyle="{color: '#AA334F'}" :inactiveStyle="{color: '#999999'}"
				:list="tab_list" @click="opt">
			</u-tabs>
		</view>

		<u-gap height="130rpx"></u-gap>
		
		<mescroll-body :empty='false' :height="mescroll_height +'px'" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
			:up="upOption">

		<view class="list">
			<view class="item" v-for="(items,indexs) in list" :key="indexs" @tap="$go(items.id)">
				<zui-flat bgColor='#fff'>
					<zui-orderTop padding='30rpx' title='中森珠宝' 
					:status="state_list[items.state]">
					</zui-orderTop>
					<!-- 商品列表 -->
					<view v-for="(item,index) in items.subs" :key="index">
						<!-- <zui-good
							:img='item.goods.goods_thumb' 
							:name='item.goods.goods_name'
							:price='item.goods_price' 
							:cost='item.process_fee'
							:num='item.goods_num'>
						</zui-good> -->
						<zui-good
							:img='item.goods.goods_thumb' 
							:name='item.goods.goods_name'
							:price='item.goods_price' 
							:cost='item.process_fee'
							:num='item.goods_num'
							:sku='item.specs.goods_specs'
							:is_fee='false'
							>
							</zui-good>
						<u-gap height="30rpx"></u-gap>
					</view>
					<zui-line padding='0'></zui-line>
					<u-gap height="30rpx"></u-gap>
					<view class="ends_box">
						<view class="both">共{{items.goods_num}}件商品,合计</view>
						<view class="ends">￥{{items.total_price}}</view>
					</view>
					<zui-arrBtn padding='30rpx'>
						<view class="btn_box" v-if="items.state==10" >
							<button class="anBtn" type="primary">去付款</button>
						</view>
						<!-- <u-button type="warning" size="small" plain shape="circle" text="查看物流"></u-button> -->
						<view class="btn_box" v-if="items.state==40" >
							<button class="anBtn_plain" type="primary">查看物流</button>
						</view>
						<view class="btn_box" v-if="items.state==40" >
							<button class="anBtn" type="primary">确认收货</button>
						</view>
					</zui-arrBtn>
				</zui-flat>
				<u-gap height="30rpx"></u-gap>
			</view>
		</view>
		
		</mescroll-body>

<!-- 		<u-modal :show="show" @confirm='confirm'
			@cancel='cancel' title="提示框" :showCancelButton='true' 
		content='确认已收获'>
		</u-modal> -->

	</zui-box>
</template>

<script>
	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				mescroll_height:'',
				
				type:1,//是复购商品
				state_list:[],//状态列表
				order_type_list:[],//是否是复购
				state:0,
				// 全部 待支付 待发货 待收货 已完成 待审核 已取消 
				tab_list: [{
					name: '全部',
					state: 0,
				}, {
					name: '待支付',
					state: 10,
				},
				{
					name: '待发货',
					state: 30,
				},
				{
					name: '待收货',
					state: 40,
				}, {
					name: '已完成',
					state: 50,
				}],
				list: [],
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {
					auto: false //是否在初始化后,自动执行downCallback; 默认true
				},
				upOption: {
					auto: false // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
				},
				show:false,//确认收获
				order_id:'',//存储订单id
			};
		},
		created() {
			let that = this;
			   uni.getSystemInfo({ 
				success(res) {
				console.log('一',res.windowHeight); //可使用窗口高度
				that.mescroll_height = res.windowHeight - that.$u.getPx(uni.$u.props.navbar.height) - that.$u.sys().statusBarHeight -80
				
				console.log('二',that.mescroll_height)
				}
			})
		},
		//页面加载完毕
		onLoad(e) {
			console.log(e);
			this.type = e.type;
		
		},
		onShow() {
			// this.getlist();
			this.$nextTick(()=>{
				this.mescroll.resetUpScroll();
			})
		},
		methods: {
			$go(id){
			
				this.order_id = id;
				uni.$u.route('pages/integral/order_item', {
					order_id:this.order_id
				});
			},
			//按钮操作
			handle(e,state,id){
				e.preventDefault();
					var that = this;
						this.order_id = id;
				if(state==50){
				
					// this.show = true;
				
					uni.showModal({
						title: '确认收货',
						content: '请确保已经收到货物,并且货物完好',
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
								
								
								// /app/order_goods/receiveGoods
								
								// 保存地址
								uni.$u.http.post('/app/order_goods/receiveGoods', {
									order_id:that.order_id,
									
								},{
									custom:{
										auth: true,
										toast: true,
										catch: true,
									}
								}
								
								).then(res => {
									
									that.say('确认收货成功')
									that.$nextTick(()=>{
										that.mescroll.resetUpScroll();
									})
									
									
									
								}).catch(err => {
									
								})
								
								
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					
				}
					if(state==60){
						
						uni.$u.route('pages/integral/logistics', {
							order_id:this.order_id
						});
						
					}
			},
			
			//切换切换栏
			opt(item){
				this.state = item.state;
				this.$nextTick(()=>{
					this.mescroll.resetUpScroll();
				})
				console.log(item.state)
			},
//下拉刷新的回调, 重置列表为第一页 (此处可删,mixins已默认)
			downCallback() {
				setTimeout(() => {
					this.mescroll.resetUpScroll();
				}, 1000);
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
			


				uni.$u.http
					.get('/app/order_integral/list', {
						params: {
							page: page.num,
							state: this.state,
							type: this.type,
						},
						custom: {
							auth: true,
							toast: false,
							catch: false,
						},
					})
					.then(res => {
						console.log('返回的数据', res);
						this.mescroll.endSuccess(res.list.length);
						//设置列表数据
						if (page.num == 1) this.list = []; //如果是第一页需手动制空列表
						this.list = this.list.concat(res.list); //追加新数据
						this.state_list = res.state_list; //追加新数据
						this.order_type_list= res.order_type_list; //是否是复购
						
					})
					.catch(res => {
						this.mescroll.endErr();
					});
			},
		}
	}
</script>

<style lang='scss' scoped>
	
	/* //空数据 */
	/deep/.mescroll-empty {
		box-sizing: border-box;
		width: 100%;
		padding: 400rpx 50rpx;
		text-align: center;
	}
	
/* 	/deep/.mescroll-body{
		min-height: 100% !important;
	} */
		
	.tabs_box{
		/* height: 100rpx; */
		background: #fff;
		z-index: 9999;
		position: fixed;
		width: 100%;
	}
	.ends_box {
		display: flex;
		justify-content: flex-end;

		.both {
			color: #9D97A7;
		}

		.ends {
			color: #999999;
		}
	}

	/deep/.u-button {
		padding: 0 28rpx;
		margin-left: 30rpx !important;
	}

	/deep/.u-button--plain {
		background-color: transparent !important;

		&.u-button--warning {
			color: #f9ae3d;
		}
	}

	.list {
		.item {
		
		}
	}
	
	.btn_box {
		padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
		padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
		box-sizing: border-box;
		
	/* 	// width: 690rpx; */
	/* 	margin: 0 auto; */
		/* padding: 30rpx; */
		margin-left: 30rpx;
		
	}
	.anBtn_plain {
		
		background: transparent;
		border: 1px solid #AA334F ;
		width: 200rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 60rpx;
		color: #AA334F;
		font-size: 26rpx;
		transform: scale(1);
		transition: all 0.25s;
	}
	.anBtn_plain:active {
		transform: scale(0.9);
		opacity:0.9;
	}
		
	.anBtn_plain::after {
		border: 0;
	}
		
	.anBtn_plain[disabled] {
		opacity:0.9;
	}
	.anBtn_plain[disabled]:active {
		transform: scale(1);
		opacity:0.9;
	}
	.anBtn_plain[disabled]:not([type]) {
		transform: scale(1);
		opacity:0.9;
	}
	.anBtn {
		background: #fff;
		border: 1px solid #AA334F ;
		width: 200rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 60rpx;
		color: #AA334F;
		font-size: 26rpx;
		transform: scale(1);
		transition: all 0.25s;
	}
	.anBtn:active {
		transform: scale(0.9);
		opacity:0.9;
	}
		
	.anBtn::after {
		border: 0;
	}
		
	.anBtn[disabled] {
		opacity:0.9;
	}
	.anBtn[disabled]:active {
		transform: scale(1);
		opacity:0.9;
	}
	.anBtn[disabled]:not([type]) {
		transform: scale(1);
		opacity:0.9;
	}
	

</style>
